<script setup>
  import { ref, reactive } from 'vue';
  import DragForm from '../packages/components/DragForm/index.vue';
  
  const handleActiveClick = (res) => {
    console.log('点击操作按钮', res);
  }

  const activeKey = ref('1');
  const handleChangeTabs = (value) => {
    activeKey.value = value;
    // queryListConfig.externalControlValue = value;
  };

  const queryListConfig = reactive({
    isAutoRender: false,
    // externalControlValue: activeKey.value,
    // pagination: false,
    tableHandleOptions: [
      {
        name: '新增',
        onClick: handleActiveClick,
      },
      {
        name: '导入',
        onClick: handleActiveClick,
      }
    ],
    columns: [
      { title: '文件名称', dataIndex: 'name', key: "link", onClick: handleActiveClick },
      { title: '文件类型', dataIndex: 'typeName' },
      { title: '文件后缀', dataIndex: 'suffix', },
      { title: '应用场景', dataIndex: 'scene', },
      { title: '说明', dataIndex: 'priceRemark' },
      { title: '创建日期', dataIndex: 'createTime', key: 'formatDate', width: 120 },
      { title: '创建人', dataIndex: 'userName', width: 120 },
      {
        title: '操作',
        key: 'action',
        width: 260,
        options: [
          {
            name: '预览',
            controlledConfig: {
              type: 'custom',
              key: 'suffix',
              options: ['jpg', 'jpeg','png'],
            },
            onClick: handleActiveClick
          },
          {
            name: '授权',
            controlledConfig: {
              type: 'string',
              value: '1',
            },
            onClick: handleActiveClick
          },
          {
            name: '编辑',
            controlledConfig: {
              type: 'string',
              value: '1'
            },
            onClick: handleActiveClick
          },
          {
            name: '下载',
            controlledConfig: {
              type: 'string',
              value: '1'
            },
            onClick: handleActiveClick
          },
          {
            name: '删除',
            isDelete: true,
            onClick: handleActiveClick
          }
        ]
      },
    ],
    formConfig: {
      layout: {
        gutter: 48,
        span: 12
      },
      attrs: {
        // layout: 'inline',
        labelCol: { style: { width: '120px' } },
      },
      options: [
        {
          label: '测试-Input',
          name: 'name',
          type: 'Input',
          attrs: {
            placeholder: "请输入文件名称",
          },
          isRequired: true,
        },
        {
          label: '测试-select',
          name: 'select',
          type: 'Select',
          attrs: {
            // placeholder: "请选择文件名称",
          },
          optionsConfig: {
            list: [
              { label: '测试一', value: 1 },
              { label: '测试二', value: 2 },
            ],
          },
          isRequired: true,
        },
        {
          label: '测试-radio',
          name: 'radio',
          type: 'Radio',
          defaultValue: 1,
          optionsConfig: {
            requestUrl: '/filetype/list',
            fieldNames: {
              label: 'name',
              value: 'name',
            },
            list: [
              { label: '测试一', value: 1 },
              { label: '测试二', value: 2 },
            ],
          },
        },
        {
          label: '测试-select',
          name: 'select_1',
          type: 'Select',
          attrs: {
            // placeholder: "请选择文件名称",
          },
          optionsConfig: {
            list: [
              { label: '测试一', value: 1 },
              { label: '测试二', value: 2 },
            ],
          },
          isRequired: true,
        },
      ],
      handleBtns: [
        {
          name: '查询',
          type: "primary",
          status: 'validate',
          onClick: handleActiveClick,
        },
        {
          name: '重置',
          status: 'reset',
          onClick: handleActiveClick,
        }
      ],
    }
  });
</script>

<template>
  <DragForm
  >

  </DragForm>
  <CustomFormTable
    :isAutoRender="queryListConfig.isAutoRender"
    :formConfig="queryListConfig.formConfig"
    :externalControlValue="queryListConfig.externalControlValue"
    :tableHandleOptions="queryListConfig.tableHandleOptions"
    :columns="queryListConfig.columns"
    :pagination="queryListConfig.pagination"
  >
  <!-- <template v-slot:tableHandle>
    <div class="handle-btn-">
      <a-tabs v-model:activeKey="activeKey" @change="handleChangeTabs">
        <a-tab-pane key="1" tab="我创建的"></a-tab-pane>
        <a-tab-pane key="2" tab="授权给我的"></a-tab-pane>
      </a-tabs>
      <a-button type="primary" @click="handleAppendEdit('')" v-if="activeKey === '1'">新增</a-button>
    </div>
  </template> -->
  </CustomFormTable>
</template>

<style scoped>
</style>
